<script setup>
import { ref, onUpdated, watch, onMounted, watchEffect } from 'vue';
import axios from 'axios';
import { getChatCompletion } from '@/utils/kimi';

import u646 from '@/assets/u646_state0.jpg'
import { useRouter } from 'vue-router';
import { useStore } from '@/stores/user';
import u1658 from '@/assets/u1658.png'
import { dialogStore } from '@/stores/dialog';

const userInput = ref(''); //用户说的话 
const response = ref('');  // ai回复 
const usertext = ref('')

const dialog = dialogStore()
const store = useStore()

const dialoglist = ref([]);

dialoglist.value = dialog.loglist
const msg = ref('')

const sendMessage = async () => {
    try {
        dialog.changeloglist({
            id: 'user',
            text: userInput.value,
            photo: store.photo
        })

        msg.value = userInput.value
        userInput.value = ''
        response.value = await getChatCompletion(msg.value);


        dialog.changeloglist({
            id: 'response',
            text: response.value,
            photo: u1658
        })

        console.log(dialoglist.value);


    } catch (error) {
        response.value = "请求失败，请检查控制台错误信息。";
    }
};

const router = useRouter()
function onClickLeft() {
    router.back()
}


</script>


<template>
    <div class="chat-container">
        <van-nav-bar class="header" placeholder left-arrow @click-left="onClickLeft" z-index="99" fixed
            :border="false" />
        <div class="chatbox">

            <main class="containernmain">
                <!-- ai speck -->
                <div v-for="item in dialoglist" :key="item?.id" :class="item?.id" class="dialogtext">
                    <div class="aiphoto">
                        <van-image :src="item?.photo" round></van-image>
                    </div>
                    <div class="aires">
                        <p>{{ item?.text }}</p>
                    </div>
                </div>

            </main>

            <!-- 输入框 -->
            <van-cell-group class="inputcell" inset>
                <van-field @keyup.enter="sendMessage" clickable v-model="userInput" center placeholder="输入你想知道的事">
                    <template #button>
                        <van-button size="small" class="searchbtn" round @click="sendMessage">搜索</van-button>
                    </template>
                </van-field>
            </van-cell-group>
        </div>

    </div>
</template>

<style scoped lang="scss">
.chat-container {
    height: calc(100% - 0.7rem);
    display: flex;
    flex-direction: column;

    .header {

        --van-nav-bar-icon-color: #1b1b1b;
        --van-nav-bar-background: rgbr(0, 0, 0, 0) !important;

    }


    ::deep(van-nav-bar__content) {
        background-color: rgba(0, 0, 0, 0);
    }

    .chatbox {

        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 5%;
        overflow: auto;

    }



    .containernmain {
        flex: 1;
        overflow: auto;
        padding-top: 20px;
        position: relative;

        .dialogtext {
            max-width: 70%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            background-color: #fff;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 20px;
            clear: both;
        }

        .response {
            float: left;

            max-width: 70%;
            margin-left: 20px;

            .aiphoto {
                margin-right: 10px;
            }
        }

        .user {
            float: right;
            margin-right: 20px;
            flex-direction: row-reverse;

            .aiphoto {
                margin-left: 10px;
            }
        }



        .aiphoto {
            width: 50px;
            height: 50px;


            .van-image {
                width: 100%;
                height: 50px;
            }
        }

        .aires {

            flex: 1;

        }

        // .aires p {
        //     // font-size: 16px;
        //     // line-height: 1.5;
        //     // margin-left: 10px;
        //     animation: typing 0.5s steps(1, end) forwards;
        //     /* 使用 steps 函数逐字显示 */
        // }

        // @keyframes typing {
        //     from {
        //         width: 0;
        //     }

        //     to {
        //         width: 100%;
        //     }
        // }
    }

    .inputcell {
        width: 85%;
        height: 44px;
        margin: 0 auto;
        border-radius: 22px;
        margin-top: 20px;
    }

    .van-field {
        width: 100%;
        border: 1px solid #1b1b1b;
        border-radius: 22px;
        height: 44px;
        padding: 0;
        padding-left: 16px;

        .searchbtn {
            color: #fff;
            width: 80px;
            height: 40px;
            background-color: #1b1b1b;
        }
    }
}
</style>